<template>
  <div class="login-wrapper" style="background-color: white; height: 100vh">
    <div class="shading">
      <image src="/static/images/app_logo.png" />
    </div>
    <div class="whiteBg">
      <div class="list">
		  <div class="item">
		    <div class="acea-row row-middle">
		      <image
		        src="/static/images/4-001.png"
		        style="width: 24rpx; height: 34rpx"
		      ></image>
		      <input
		        type="text"
		        class="texts"
		        placeholder="输入姓名"
		        v-model="nickname" 
		      />
		    </div>
		  </div>
        <div class="item">
          <div class="acea-row row-middle">
            <image
              src="/static/images/phone_1.png"
              style="width: 24rpx; height: 34rpx"
            ></image>
            <input
              type="number"
              class="texts"
              placeholder="输入手机号码"
              v-model="account"
              :maxlength="11"
            />
          </div>
        </div>
        <div class="item">
          <div class="acea-row row-middle">
            <image
              src="/static/images/code_2.png"
              style="width: 28rpx; height: 32rpx"
            ></image>
            <input
              type="number"
              placeholder="填写验证码"
              class="codeIput"
              v-model="captcha"
              :maxlength="6"
            />
            <button
              class="code"
              :disabled="disabled"
              :class="disabled === true ? 'on' : ''"
              @click="code"
            >
              {{ text }}
            </button>
          </div>
        </div>
        <div class="item">
          <div class="acea-row row-middle">
            <image
              src="/static/images/code_1.png"
              style="width: 28rpx; height: 28rpx"
            ></image>
            <input
              type="password"
              class="texts"
              placeholder="填写密码"
              v-model="password"
              required
            />
          </div>
        </div>

        <div class="item">
          <div class="acea-row row-middle">
            <image
              src="/static/images/zc_yq_code.png"
              style="width: 24rpx; height: 24rpx"
            ></image>
            <input
              type="text"
              placeholder="填写邀请码"
              class="codeIput"
              disabled
              v-model="inviteCode"
            />
          </div>
        </div>
      </div>
	  
	  <view>
		<checkbox-group  @change="handleChange" >
		<view style="font-size: 12px;display:flex;margin-left: 40px;margin-bottom: 28px;"> 
			<view >
				<checkbox style="transform: scale(0.9)">
				请阅读并同意</checkbox>
			</view>
			<view style="margin-top: 4rpx;">
				<text style="color: #4188f1;" @click="goXieyi(6)">《用户协议》</text>及<text  style="color: #4188f1;"  @click="goXieyi(7)">《隐私政策》</text>
			</view>
		</view>
			</checkbox-group>
	  </view>
	  
	  
      <div class="logon" @click="register">注册</div>
    </div>
    <div class="bottom">
      已经注册
      <a @click="toDownload">直接下载</a>
    </div>
  </div>
</template>

<script>
import sendVerifyCode from "@/mixins/SendVerifyCode";
import { loginH5, registerVerify, register, getUserInfo } from "@/api/user";

import { appAuth, appleLogin } from "@/api/public";

export default {
  name: "scancoderegister",
  mixins: [sendVerifyCode],
  data: function () {
    return {
		nickname:"",
      account: "",
      password: "",
      captcha: "",
      inviteCode: "",
      keyCode: "",
      platform: "",

      appUserInfo: null, // 微信登录保存的用户信息
      appleUserInfo: null,
      appleShow: false, // 苹果登录版本必须要求ios13以上的
	  xieyi:false,
    };
  },

  mounted: function () {
    this.getCode();
  },
  onLoad(options) {
    const { inviteCode } = options;
    console.log(options);
    if (inviteCode) {
      this.inviteCode = inviteCode;
    }
    let self = this;
    uni.getSystemInfo({
      success: function (res) {
        if (
          res.platform.toLowerCase() == "ios" &&
          res.system.split(" ")[1] >= 13
        ) {
          self.appleShow = true;
        }
      },
    });
  },
  methods: {
	  goXieyi(id){
	  	uni.navigateTo({
	  		url:"/pages/scanCodePages/register/xieyi?id="+id
	  	})
	  },
	  handleChange(e) {
	  			 	this.value = e.detail.value;
	  				console.log(this.value);
	  				if(this.value.length == 0){
	  					//uni.$u.toast('请勾选《用户协议》《隐私协议》！')
	  					this.xieyi = false
	  				}else{
	  					this.xieyi = true
	  					console.log('勾选成功')
	  				}
	  			}, 
    toDownload() {
      // uni.redirectTo({
      //   url: "/pages/scanCodePages/download/index",
      // });
	  window.location.href="http://m.lbtai.com/download"
    },
    // 苹果登录
    appleLogin() {
      let self = this;
      this.account = "";
      this.captcha = "";
      uni.showLoading({
        title: "登录中",
      });
      uni.login({
        provider: "apple",
        timeout: 10000,
        success(loginRes) {
          uni.getUserInfo({
            provider: "apple",
            success: function (infoRes) {
              self.appleUserInfo = infoRes.userInfo;
              self.appleLoginApi();
            },
            fail() {
              uni.hideLoading();
              uni.showToast({
                title: "获取用户信息失败",
                icon: "none",
                duration: 2000,
              });
            },
            complete() {
              uni.hideLoading();
            },
          });
        },
        fail(error) {
          uni.hideLoading();
          console.log(error);
        },
      });
    },
    // 苹果登录Api
    appleLoginApi() {
      let self = this;
      appleLogin({
        openId: self.appleUserInfo.openId,
        email:
          self.appleUserInfo.email == undefined ? "" : self.appleUserInfo.email,
        identityToken: self.appleUserInfo.identityToken || "",
      })
        .then((res) => {
          this.$store.commit("LOGIN", {
            token: res.data.token,
          });
          this.getUserInfo(res.data);
        })
        .catch((error) => {
          uni.hideLoading();
          uni.showModal({
            title: "提示",
            content: `错误信息${error}`,
            success: function (res) {
              if (res.confirm) {
                console.log("用户点击确定");
              } else if (res.cancel) {
                console.log("用户点击取消");
              }
            },
          });
        });
    },
    // App微信登录
    wxLogin() {
      let self = this;
      this.account = "";
      this.captcha = "";
      uni.showLoading({
        title: "登录中",
      });
      uni.login({
        provider: "weixin",
        success: function (loginRes) {
          // 获取用户信息
          uni.getUserInfo({
            provider: "weixin",
            success: function (infoRes) {
              uni.hideLoading();
              self.appUserInfo = infoRes.userInfo;
              self.appUserInfo.type =
                self.platform === "ios" ? "iosWx" : "androidWx";
              self.wxLoginGo(self.appUserInfo);
            },
            fail() {
              uni.hideLoading();
              uni.showToast({
                title: "获取用户信息失败",
                icon: "none",
                duration: 2000,
              });
            },
            complete() {
              uni.hideLoading();
            },
          });
        },
        fail() {
          uni.hideLoading();
          uni.showToast({
            title: "登录失败",
            icon: "none",
            duration: 2000,
          });
        },
      });
    },
    wxLoginGo(userInfo) {
      appAuth(userInfo)
        .then((res) => {
          if (res.data.type === "register") {
            uni.navigateTo({
              url: "/pages/users/app_login/index?authKey=" + res.data.key,
            });
          }
          if (res.data.type === "login") {
            this.$store.commit("LOGIN", {
              token: res.data.token,
            });
            this.getUserInfo(res.data);
          }
        })
        .catch((res) => {
          that.$util.Tips({
            title: res,
          });
        });
    },
    getCode() {
      let that = this;
    },
    async register() {
      const that = this;
	  if (!that.nickname) return that.$util.Tips({
	  	title: '请填写姓名'
	  });
	  if(!this.xieyi){
	  	return that.$util.Tips({
	  		title: '请先阅读协议后登录'
	  	});
	  }
      register({
		  nickname:that.nickname,
        phone: that.account,
        captcha: that.captcha,
        inviteCode: that.inviteCode,
        password: that.password,
        spreadPid: that.$Cache.get("spread"),
      })
        .then((res) => {
          that.$util.Tips({
            title: res.message,
          });
        })
        .catch((err) => {
          that.$util.Tips({
            title: err,
          });
        });
    },
    async code() {
      let that = this;
      if (!that.account)
        return that.$util.Tips({
          title: "请填写手机号码",
        });
      if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.account))
        return that.$util.Tipsi({
          title: "请输入正确的手机号码",
        });
      await registerVerify(that.account)
        .then((res) => {
          that.$util.Tips({
            title: res.message,
          });
          that.sendCode();
        })
        .catch((err) => {
          return that.$util.Tips({
            title: err,
          });
        });
    },
  },
};
</script>
<style lang="scss" scoped>
page {
  background: #fff;
}

.appLogin {
  // margin-top: 30rpx;
}

.code img {
  width: 100%;
  height: 100%;
}

.acea-row.row-middle {
  input {
    margin-left: 20rpx;
    display: block;
  }
}

.login-wrapper {
  padding: 30rpx;
  .shading {
    display: flex;
    align-items: start;
    justify-content: center;
    width: 100%;
    margin-top: 105rpx;

    image {
      width: 250rpx;
      height: 250rpx;
    }
  }

  .whiteBg {
    margin-top: 50rpx;

    .list {
      border-radius: 16rpx;
      overflow: hidden;

      .item {
        border-bottom: 1px solid #f0f0f0;
        background: #f8f5fc;
        margin: 15rpx 0;
        border-radius: 50px;

        .row-middle {
          position: relative;
          padding: 16rpx 45rpx;

          .texts {
            flex: 1;
            font-size: 28rpx;
            height: 60rpx;
            line-height: 60rpx;
            display: flex;
            justify-content: center;
            align-items: center;
          }

          input {
            flex: 1;
            font-size: 28rpx;
            height: 60rpx;
            line-height: 60rpx;
            display: flex;
            justify-content: center;
            align-items: center;
          }

          .code {
            position: absolute;
            right: 30rpx;
            top: 50%;
            color: $theme-color;
            font-size: 26rpx;
            transform: translateY(-50%);
          }
        }
      }
    }

    .logon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 86rpx;
      margin-top: 60rpx;
      background-color: $theme-color;
      border-radius: 120rpx;
      color: #ffffff;
      font-size: 30rpx;
    }

    .tips {
      margin: 30rpx;
      text-align: center;
      color: #999;
    }
  }
  .bottom {
    font-size: 20rpx;
    margin-top: 30rpx;
    color: #808080;
    a {
      color: rgb(0, 136, 255);
      margin-left: 20rpx;
    }
  }
}
</style>
